<template>
    <div class="page createTemporary-page" data-page="succession" style="z-index: 2">
        <div class="link-page-nav">
            <a href="#" class="link" @click=forceBack> <i class="iconfont icon-APPicon_guanbi"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">现场交接班</div>
        </div>
        <div class="page-content" style="padding: 0 20px 120px 20px;">
            <div class="QR-code" id="QR-code">
                <div id="QR-code_img" @click="refreshTimeStamp"></div>
                    <div style="text-align: center;margin-top: 20px;font-size: 18px;">请向工作人员出示您的二维码</div>
            </div>
            
            <div class="QR-no" id="QR-no">
                <i class="iconfont icon-kulian-line" style="font-size: 100px;color: #E07762;"></i>
                <p>交班被拒绝，请修正</p>
            </div>
            <div class="QR-yes" id="QR-yes">
                    <i class="iconfont icon-duigou2" style="font-size: 100px;color: #69BA71;"></i>
                    <p>感谢您的辛勤工作</p>
            </div>
           
        </div>
    </div>
</template>
<script>
    return {
        data() {
            return {
                pageName: 'succession',
                id: this.$route.params.id,
                time:''
            }
        },
        mounted() {
            let self = this
            self.getQrcode()
             self.scanningreciviceLocation()
             self.time&&clearInterval(self.time)
             self.time =setInterval(res=>{
                jQuery('#QR-code_img').empty()
                let  timestamp ;
                timestamp = (new Date()).getTime();
                new QRCode(document.getElementById("QR-code_img"), {
                    text:  self.visualCode+'?'+timestamp,
                    width: 174,
                    height: 174
                });
             },60000)
        },
        on:{
            pageAfterOut:function(){
                clearInterval( this.time )
            } 
        },
        methods: {
               //销毁指定返回
            forceBack: function () {
                app.view.current.router.back('/changeShifts/',{force:true})
            },
           refreshTimeStamp:function(){
            let self = this
            jQuery('#QR-code_img').empty()
            self.getQrcode()
            },
            getQrcode:function(){
                let self = this
            Dao.getShiftsRecordVisualCode({ shiftsRecordId: self.id }, function (data) {
                let  timestamp ;
                timestamp = (new Date()).getTime();
                self.visualCode=data.visualCode
                new QRCode(document.getElementById("QR-code_img"), {
                    text: data.visualCode+'?'+timestamp,
                    width: 174,
                    height: 174
                });
            })
            },
            scanningreciviceLocation: function () {
                if (this.$route.params.type==1) {
                    jQuery('#QR-no').show()
                    jQuery('#QR-code').hide()
                } else if(this.$route.params.type==0){
                    jQuery('#QR-yes').show()
                    jQuery('#QR-code').hide()
                }
            }
        },
    }
</script>
<style scoped>
    .QR-code {
        text-align: center;
        margin-bottom: 20px;
    }

    .QR-code img {
        width: 70%;
        margin: 0 auto;
    }

    .QR-no ,.QR-yes{
        display: none;
        text-align: center;
    }
    .QR-no p,.QR-yes p{
        font-size: 18px;
        color: #333333;
    
    }
</style>